<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>File Converts</title>
		<link rel="icon" href="images/favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/shouyie.css">
		<!-- bootstrap样式 -->
		<icon></icon>
		<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
		<script src="bootstrap/bootstrap.min.js"></script>
		<script src="bootstrap/popper.min.js"></script>
		<script src="bootstrap/bootstrap.bundle.min.js"></script>
		<!-- vue -->
		<script src="vue/vue.js"></script>
		<script type="module">
			new Vue({
				el: '#app',
				data: {
					logo: "images/filetranslogo.gif",
					download: [{
						version: "下载v1.0",
						link: "https://www.fntop.cn/converts-v1.exe",

					}, {
						version: "下载v2.0",
						link: "https://www.fntop.cn/converts-v2.exe",

					}, {
						version: "下载v3.0",
						link: "https://www.fntop.cn/converts-v3.exe",

					}],
					active: 0,
					name: " File Converts",
					copyright: "Copyright © 2023 cn.fntop",
					beian: "赣ICP备2023002035号",
					headData: [{
						href: "index.html",
						remark: "首页"
					}, {
						href: "md.html",
						remark: "使用说明"
					}, {
						href: "contact.html",
						remark: "联系我们"
					}, {
						href: "member.html",
						remark: "会员"
					}],

					//default primary secondary success danger warning info light dark 
					bodyData: [{
						title: "稳定版",
						badge: "position-absolute badge rounded-pill bg-success ms-3",
						badgeContent: "v1.0 已发布",
						remark: "PNG,JPEG,ICO等图像转化",
						img: "images/lb3.jpeg",
						urls: [{
							href: "https://www.fntop.cn/converts-v1.exe",
							content: "下载"
						}, {
							href: "md.html",
							content: "使用说明"
						}]

					}, {
						title: "创新版",
						badge: "position-absolute badge rounded-pill bg-success ms-3",
						badgeContent: "v2.0 已发布",
						remark: "18种系统主题、两种按钮样式主题、享双端个人信息查看",
						img: "images/lb2.jpg",
						href: "",
						urls: [{
							href: "https://www.fntop.cn/converts-v2.exe",
							content: "下载"
						}, {
							href: "md.html",
							content: "使用说明"
						}]
					}, {
						title: "神秘版（部分功能待完善）",
						badge: "position-absolute badge rounded-pill bg-success ms-3",
						badgeContent: "v3.0 已发布",
						remark: "PDF+WORD+PPT文件转化、自定义主题。享后续各种文件转化功能、主题升级、用户注册续费等功能",
						img: "images/lb1.jpeg",
						href: "",
						urls: [{
							href: "https://www.fntop.cn/converts-v3.exe",
							content: "下载"
						}, {
							href: "md.html",
							content: "使用说明"
						}]
					}],
					bodyImages: {
						after: [{
							image: "images/trans/1.png",
							imageTitle: "webp",
						}, {
							image: "images/trans/2.jpeg",
							imageTitle: "jpeg",
						}, {
							image: "images/trans/3.ico",
							imageTitle: "ico",
						}, {
							image: "images/trans/4.gif",
							imageTitle: "gif",
						}, {
							image: "images/trans/5.bmp",
							imageTitle: "bmp",
						}, {
							image: "images/trans/6.webp",
							imageTitle: "tiff",
						}]
					},

					footData: [{
						title: "微信",
						href: "#",
						img: "images/wx.jpg",
						imgClass: "QR_code",
						target: "_self",
						sub: []
					}, {
						title: "公众号",
						href: "#",
						img: "images/public.png",
						imgClass: "QR_code",
						target: "_self",
						sub: []
					}, {
						title: "微信赞赏",
						href: "#",
						img: "images/wxnicepay.png",
						imgClass: "QR_code",
						target: "_self",
						sub: []
					}, {
						title: "微信群",
						href: "#",
						img: "images/wxgroup.png",
						imgClass: "QR_code",
						target: "_self",
						sub: []
					}, {
						title: "Gitee",
						href: "https://gitee.com/FnTop",
						imgClass: "",
						img: "",
						target: "_blank",
						sub: []
					}, {
						title: "CSDN",
						href: "https://blog.csdn.net/qq_40673786?spm=1010.2135.3001.5343",
						imgClass: "",
						img: "",
						target: "_blank",
						sub: []
					}, {
						title: "简体中文",
						href: "#",
						img: "",
						sub: [{
							title: "简体中文",
							href: "#",
							target: "_self",
							img: "",
							sub: []
						}, {
							title: "繁体中文",
							href: "#",
							target: "_self",
							img: "",
							sub: []
						}, {
							title: "english",
							href: "#",
							target: "_self",
							img: "",
							sub: []
						}]
					}]
				}
			});
		</script>
	</head>
	<body>
		<div id="app">
			<!--头部-->
			<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top shadow-lg bg-body-tertiary"
				data-bs-theme="dark">
				<div class="container-fluid" style="margin-left: 12%;">
					<a class="navbar-brand" href="index.html">
						<img :src="logo" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
						{{name}}
					</a>
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
						data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
						aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav me-auto mx-2">
							<div v-for="(item,index) in headData">
								<li class="nav-item">
									<a :class="active==index?'nav-link active':'nav-link'"
										:href="item.href">{{item.remark}}</a>
								</li>
							</div>
						</ul>
						<form class="d-flex" style="margin-right: 12%;" role="search">
							<a class="btn btn-outline-success ms-3" v-for="item in download" :href="item.link"
								type="submit">{{item.version}}</a>
						</form>
					</div>
				</div>
			</nav>
			<!--3.核心内容开始-->
			<div class="container text-center">
				<!-- 介绍 -->
				<div class="row" style="margin-top: 80px;">
					<div class="col">
						<div class="col">
							<h2>软件介绍</h2>
							<p>这是一款离线运行的多类型文件互转工具，旨在帮助用户快速高效的获取所需类型文件。</p>
						</div>
					</div>
				</div>
				<!-- 轮播 -->
				<div class="row mt-3">
					<div class="col">
						<div id="carouselExampleDark" class="carousel slide" data-bs-ride="carousel">
							<div class="carousel-inner position-relative">
								<!-- 卡片描述 -->
								<div v-for="(item,index) in bodyData">
									<div :class="index==0?'carousel-item active':'carousel-item'"
										:data-bs-interval="index==0?6000:4000">
										<img :src="item.img" class="d-block w-100" alt="..." height="720px">
										<div class="carousel-caption d-none d-md-block" style="margin-bottom:20%">
											<div class="card-body">

												<div><span class="card-title"
														style="font-size: 24px;">{{item.title}}</span><span
														:class="item.badge">{{item.badgeContent}}</span></div>
												<p class="card-text mt-3">
													<span>{{item.remark}}</span>
												</p>
												<div class="mt-3" v-if="item.urls!='' && item.urls.length!=0">
													<span v-for="subitem in item.urls">
														<a :href="subitem.href"
															class="btn btn-outline-warning ms-3 mb-2">{{subitem.content}}</a>
													</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
								data-bs-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="visually-hidden">Previous</span>
							</button>
							<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
								data-bs-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="visually-hidden">Next</span>
							</button>
						</div>

					</div>
				</div>


				<!-- 图片内容 -->
				<div class="row mt-3">
					<div class="col">
						<div class="row">
							<div class="col my-5" v-for="a in bodyImages.after">
								<span class="my-3">{{a.imageTitle}}</span>
								<img class="img-fluid" :src="a.image">
							</div>
						</div>
					</div>
				</div>


				<!-- 页脚 -->
				<!-- <div class="row fixed-bottom" >  //固定底部-->
				<div class="row mt-5">
					<div class="col">
						<!--4.页脚部分开始-->
						<div class="footer">
							<ul class="uu">
								<span v-for="item in footData">
									<li :class="item.sub.length!=0?'flast':'QR_father'">
										<a :target="item.target" :href="item.href">
											<img :class="item.imgClass" :src="item.img" v-if="item.img!==''" />
											{{item.title}}
											<ul class="languagefrom" v-if="item.sub!=null">
												<li v-for="subitem in item.sub">
													<a :target="subitem.target" :href="subitem.href">
														{{subitem.title}}
													</a>
												</li>
											</ul>
										</a>
									</li>
								</span>
							</ul>
							<p>
								{{copyright}} <br /> {{beian}}
							</p>
						</div>
						<!--4.页脚部分结束-->
					</div>
				</div>
			</div>
		</div>
		<!--3.核心内容结束-->

	</body>
</html>